<template>
  <div class="container__todoList">
    <div class="container__todoList__left">代办日历</div>
    <div class="container__todoList__line"></div>
    <div class="container__todoList__mid">
      <div class="container__todoList__mid__top">
        参与南方医科大学珠江医院的血液净化直播
      </div>
      <div class="container__todoList__mid__bottom">2020.05.07 10:30</div>
    </div>
    <div class="container__todoList__right iconfont">&#xe7eb;</div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.container__todoList {
  width: 376rem;
  height: 50rem;
  border-radius: 10rem;
  background-color: #96cdee;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #ffffffdc;
  font-weight: 600;
  font-size: 13rem;
  box-shadow: 0 3rem 6rem #bbbbbba5;
  margin-bottom: 20rem;
  &__left {
    width: 40rem;
    text-align: center;
    font-weight: bold;
    font-size: 16rem;
  }
  &__line {
    width: 3rem;
    height: 65%;
    background-color: #ee9696;
    margin: 0 -20rem;
  }
  &__mid {
    &__top {
      width: 200rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
